<template>
  <div>
    <!-- 搜索框 -->
    <el-form :inline="true" clbum="demo-form-inline">
      <el-form-item label="姓名" size="mini">
        <el-input v-model="filters.name" placeholder="请输入姓名" style="width: 10vw "></el-input>
      </el-form-item>
      <el-form-item label="系部" size="mini">
        <el-input v-model="filters.department" placeholder="请输入部门" style="width:10vw "></el-input>
      </el-form-item>
      <el-form-item label="班级" size="mini">
        <el-input v-model="filters.clbum" placeholder="请输入班级" style="width: 10vw "></el-input>
      </el-form-item>
      <el-form-item label="角色" size="mini">
        <el-select v-model="filters.role" placeholder="请选择角色" style="width: 10vw ">
          <el-option label="学生" value="1"></el-option>
          <el-option label="宿管" value="0"></el-option>
          <el-option label="管理员" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-button size="mini" type="primary" @click="fetchData">查询</el-button>
      <el-button size="mini" type="info" @click="handleReset">清除</el-button>
      <el-button size="mini" type="success" @click="showAddUsers">添加用户</el-button>
    </el-form>


    <el-dialog
        :visible.sync="isAddUsersVisible"
        title="添加用户信息"
        width="50%">
      <AddUsers @AddUsers="hideDialog" @submit="handleAddUsers"></AddUsers>
    </el-dialog>

    <el-dialog
        :visible.sync="isUpdateUsersVisible"
        title="修改用户信息"
        width="50%">
      <UpdateUsers :message="message" @UpdateUsers="hideDialog" @submit="handleUpDateUsers"></UpdateUsers>
    </el-dialog>

    <!--  用户列表-->
    <el-table :data="users" border stripe>
      <el-table-column label="用户账号" prop="userId"></el-table-column>
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="性别" prop="gender"></el-table-column>
      <el-table-column label="系部" prop="department"></el-table-column>
      <el-table-column label="班级" prop="clbum"></el-table-column>
      <el-table-column label="联系方式" prop="contactInfo"></el-table-column>
      <el-table-column label="邮箱" prop="email"></el-table-column>
      <el-table-column label="角色" prop="role">
        <template slot-scope="scope">
          {{ renderRole(scope.row.role) }}
        </template>
      </el-table-column>
      <el-table-column label="头像" prop="avatarUrl">
        <template slot-scope="scope">
          <img :src="scope.row.avatarUrl" alt="用户的头像" style="width: 50px; height: 50px;"/>
        </template>
      </el-table-column>
      <el-table-column label="是否锁定" prop="isLocked">
        <template slot-scope="scope">
          {{ scope.row.isLocked === false ? '否' : '是' }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createdAt">
        <template slot-scope="scope">
          {{ new Date(scope.row.createdAt).toLocaleString() }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <!--          <el-link style="margin-left: 10px;" type="success" @click="handleEdit(scope.row)"> 查看 </el-link>-->
          <el-link style="margin-left: 10px;" type="primary" @click="showUpdateUser(scope.row.userId)"> 编辑</el-link>
          <el-link style="margin-left: 10px;" type="danger" @click="lock(scope.row.userId)">
            {{ scope.row.isLocked === false ? '锁定' : '解锁' }}
          </el-link>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加分页器 -->
    <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="[10, 25, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>

<script>
import AddUsers from "@/components/users/AddUsers.vue";
import UpdateUsers from "@/components/users/UpdateUsers.vue";

export default {
  components: {UpdateUsers, AddUsers},
  data() {
    return {
      filters: {
        name: "",
        department: "",
        clbum: "",
        role: ""
      },
      users: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      isAddUsersVisible: false,
      isUpdateUsersVisible: false,
      message: '',

    };
  },
  mounted() {
    //   查询用户
    this.fetchData();
  },
  methods: {
    hideDialog() {
      this.isAddUsersVisible = false;
      this.isUpdateUsersVisible = false;
      // 调用搜索方法，重新加载数据
      this.fetchData();
    },
    showAddUnitModal() {
      this.isAddUsersVisible = true;
    },
    handleAddUsers() {
      // 处理添加单元信息成功后的逻辑
      // 关闭模态框等操作
      this.isAddUsersVisible = false;
    },
    handleUpDateUsers() {
      // 处理添加楼栋信息成功后的逻辑
      // 关闭模态框等操作
      this.isUpdateUsersVisible = false;
    },
    showUpdateUser(userId) {
      this.message = userId;
      this.isUpdateUsersVisible = true;
    },
    showAddUsers() {
      this.isAddUsersVisible = true;
    },
    renderRole(role) {
      if (role === '0') {
        return '宿管';
      } else if (role === '1') {
        return '学生';
      } else if (role === '3') {
        return '管理员';
      } else {
        return '未知角色';
      }
    },
    // 查询用户
    fetchData() {
      // 调用后端接口获取数据
      this.$axios.post('/api/users/page?pageNum=' + this.currentPage + '&pageSize=' + this.pageSize, {
        name: this.filters.name,
        department: this.filters.department,
        clbum: this.filters.clbum,
        role: this.filters.role
      }, {headers: {'token': this.$store.getters.getToken}}).then(response => {
        // 请求成功后更新表格数据和分页信息
        if (response.data.code === 200) {
          this.users = response.data.data.list;
          this.total = response.data.data.total;
          // 请求成功，处理响应
          this.succeed("查询成功");
        } else {
          this.$message.error(response.data.msg || '获取用户信息失败');
        }
      }).catch(error => {
        this.$message.error(error || '获取用户信息失败');
      });
    },
    handleSizeChange(size) {
      // 每页条数变更
      this.pageSize = size;
      this.fetchData();
    },
    handleCurrentChange(page) {
      // 当前页码变更
      this.currentPage = page;
      this.fetchData();
    },
    handleReset() {
      // 重置条件查询
      this.filters = {
        name: "",
        department: "",
        clbum: "",
        role: ""
      };
      this.fetchData();
    },

    //  解锁，锁定用户
    lock(userId) {
      // 发送DELETE请求
      this.$axios.put(`/api/users/lock/${userId}`)
          .then(response => {
            this.fetchData();
            if (response.data.code === 200) {
              this.succeed("修改成功");
              this.fetchData();
            } else {
              this.$message.error(response.data.msg || '修改信息失败');
            }
          })
          .catch(error => {
            this.fetchData();
            this.$message.error(error || '修改信息失败');
          });
    },
    // 成功提示信息
    succeed(msg) {
      this.$message({
        message: msg,
        type: 'success'
      });
    },
  }
};
</script>

<style>
/* 在这里添加组件的样式 */
</style>
